<template>
    <!-- 使用Element UI的Select组件创建一个下拉选择框 -->
    <el-select
      class="input-default-width w-container"
      size="large"
      placeholder="搜索机构"
      clearable
      filterable
      remote
      :remote-method="handleRemoteMethod"
      :loading="loading"
    >
      <!-- 使用v-for渲染选项列表 -->
      <el-option
        v-for="item in data"
        :key="item"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </template>
  
  <script  setup>
  // 导入后端API接口
  import { GetInstitutionsApi } from "@/api/manage/institution";
  //  导入Vue的响应式引用和生命周期钩子
  import { ref, onMounted } from "vue";
  
  // 定义props，用于接收父组件传递的agentId
  const props = defineProps({
    agentId: String | Number, // agentId可以是字符串或数字类型
  });
  // 定义一个响应式变量data，用于存储选项数据
  const data = ref([]);
  // 定义一个响应式变量loading，用于表示加载状态
  const loading = ref(false);
  /**
   * 远程搜索
   */
  const handleRemoteMethod = async (query) => {
    if (!query) {
      return;
    }
    loading.value = true;
    let res = await GetInstitutionsApi({
      agentId: props.agentId,
      institutionName: query,
    });
    if (res.success) {
      data.value = res.entityList.map((item) => {
        return {
          label: item.name,
          value: item.userId,
        };
      });
    } else {
      data.value = [];
    }
    loading.value = false; // 完成数据加载，设置loading状态为false
  };
  </script>
  
  <style lang="scss" scoped>
  .w-container {
    --el-input-width: 132px !important;
    :deep(.el-input) {
      --el-input-width: 132px !important;
    }
  }
  </style>